<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>监控看板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
<style type="text/css">
	.font1 {
   		font-family:微软雅黑;
   		font-size:52px;
   		line-height: 110px;
   		color: #ffffff
   	}
	.font2 {
  		font-family:微软雅黑;
  		font-size:36px;
  		line-height: 50px;
  		color: #ffffff;
  		align:center;
  	}
  	/* 设置表头 */
	#table1 tr .headTd {
		background-color: #4472C4;
		color: #4472c4;
		height:100px;
	}
</style>
</head>
<script type="text/javascript">
	
	function refresh(){
		window.location.reload();
	}
	setTimeout('refresh()',60000); //指定1分钟刷新一次

	var now = new Date(<%=new java.util.Date().getTime()%>);
	function run() {
		now.setSeconds(now.getSeconds() + 1);
		var day=now.getDate();
		var month=now.getMonth() + 1;
		var year=now.getFullYear();
		var weekday=new Array(7);
		weekday[0]="星期日";
		weekday[1]="星期一";
		weekday[2]="星期二";
		weekday[3]="星期三";
		weekday[4]="星期四";
		weekday[5]="星期五";
		weekday[6]="星期六";
		var b = now.toLocaleTimeString('chinese', { hour12: false });
		document.getElementById('myTime').innerHTML = year + "年" + add0(month) + "月" + add0(day)+"日";
		document.getElementById("time1").innerHTML = b;
		document.getElementById('myWeek').innerHTML = weekday[now.getDay()];
		//console.log(year + "年" + add0(month) + "月" + add0(day)+"日" + b + weekday[now.getDay()])
	}  
	setInterval(function() {run()},1000);
	 
	 function add0(m){
	    return m<10?'0'+m:m 
	 }
    
	//初始化
	$(function() {
		//年月日+星期
		run();
	})
</script>
<body>


	<!-- 轮播 -->
	<div class="layui-carousel" id="test1">
		<table id="table1" style="width: 100%; text-align: center;">
			<%-- 
				<tr height="100px">
					<td width="25%">
	   				<img alt="" src="${pageContext.request.contextPath }/images/hawllogo.png" width="150px" height="98px">
		   			</td>
		   			<td class="headTd" height="70px">
		   				<p class="font1">恒安晟世行仓储管理系统</p>
		   			</td>
		   			<td width="25%">
		   				<img alt="" src="${pageContext.request.contextPath }/images/hawllogo.png" width="150px" height="98px">
		   			</td>
				</tr> 	
				<tr height="50px">
					<td colspan="7" style="background-color: #000000b3;color: #000;">
						<a id="myTime"  class="font2"></a>
						<a id="time1" class="font2"></a>
						<a id="myWeek"  class="font2"></a>
					</td>
				</tr>
			--%>
		</table>
		<div carousel-item>
			<div><table class="layui-hide" id="stockTable"    lay-filter="stockTable" style="width: 100%"></table></div> 
        	<div><table class="layui-hide" id="putStockTable" lay-filter="putStockTable" style="width: 100%"></table></div>
        	<div><table class="layui-hide" id="outStockTable" lay-filter="outStockTable" style="width: 100%"></table></div>
			<div><table class="layui-hide" id="splitCaeTable" lay-filter="splitCaeTable" style="width: 100%"></table></div>
		</div>
	</div>

	<script type="text/javascript">
        var table;
		layui.use(['table','layer','upload','laydate', 'carousel'], function(){
			var table = layui.table //表格
			,layer = layui.layer	//弹层
			,laydate = layui.laydate	//日期
			,carousel = layui.carousel;	//轮播
			
			$('.layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			
			var day2 = new Date();
			day2.setTime(day2.getTime());
			var s2 = add0(day2.getFullYear())+"-" + add0(day2.getMonth()+1) + "-" + add0(day2.getDate());
			 
			/* 仓库物料列表
			*
			*  http://localhost:8080/reportForm/getDateBalance.do?page=1&pageSize=10&ma_id=&date=2019-10-26&customer_id=&dateTime2=2019-10-24
			*/
			table.render({
				elem: '#stockTable'
				,where:{
					'ma_id':"",
					'date':s2,
					'customer_id':"",
					'dateTime2':s2
				}
                ,url:'${pageContext.request.contextPath }/reportForm/getDateBalance.do'
                //,url:'${pageContext.request.contextPath }/json/list1.json'
				,title: 'machineList'
				,page: false
				,limits:[10,20,30]
                //,defaultToolbar:['filter', 'print']
				,request: {   //如果无需自定义请求参数，可不加该参数
	                pageName: 'page' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
	            }
	            ,response: {   //如果无需自定义数据响应名称，可不加该参数
	                countName: 'total' //规定数据总数的字段名称，默认：count
	                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
	            }
				,cols: [
					[
						/*{field:'', title:'当日库存',colspan: 14, align:'center'},*/
                        {field:'', title:'<div>当日库存&nbsp;&nbsp;&nbsp;<div style="float: right"><span id="mytime"></span></div></div>',colspan: 14, align:'center'}
                    ],
					[
					{
						field:'uid',
						title:'序号',
						width: 60,
						type:'numbers',
						align:'center'
					}, {
						field: 'customerName',
						title: '供应商',
						width: 200,
						align:'center'
					}, {
						field: 'materielName',
						title: '品名',
						width: 200,
						align:'center',
					}, {
						field: 'materielNum',
						title: 'SAP/QAD',
						align:'center',
						width: 200,
						align:'center'
					}, {
						field: 'yestdayNum',
						title: '昨日结存',
						align:'center',
						//width: 100,
						align:'center'
					}, {
						field: 'thisMonthAdd',
						title: '入库',
						align:'center',
						//width: 100,
						event: 'tankuang1',
						templet: function (row){

							var value="";

							if (row.thisMonthAdd != 0) {
								value = '<div>'+row.thisMonthAdd+'</div>';
							}else {
								value = 0;
							}
							return value;
						}
					}/* , {
						field: 'thisMonthTuiHui',
						title: '退回',
						align:'center',
						//width: 100,
						event: 'tankuang3',
						templet: function (row){
							var value="";
							if (row.thisMonthTuiHui != 0) {
								value = '<div>'+row.thisMonthTuiHui+'</div>';
							}else {
								value = 0;
							}
							return value;
						}
					} */,{
						field: 'thisMonthReduce',
						title: '出库',
						align:'center',
						//width: 100,
						event: 'tankuang2',
						templet: function (row){
							var value="";
							if (row.thisMonthReduce != 0) {
								value = '<div>'+row.thisMonthReduce+'</div>';
							} else {
								value = 0;
							}
							return value;
						}
					}/* , {
						field: 'thisMonthReturn',
						title: '退库',
						align:'center',
						//width: 100,
						event: 'tankuang4',
						templet: function (row){
							var value="";
							if (row.thisMonthReturn != 0) {
								value = '<div>'+row.thisMonthReturn+'</div>';
							} else {
								value = 0;
							}
							return value;
						}

					}, {
						field: 'geLiBalance',
						title: '不良',
						align:'center',
						width: 100 ,
                        templet: function (row){
                      		return 0;
                        } 
					} */, {
						field: 'num7',
						title: '库存',
						align:'center',
						//width: 100,
						templet: function (row){
							var value = "";
							if(null != row.geLiBalance){
								value = row.thisMonthAdd - row.thisMonthReduce + row.yestdayNum - row.thisMonthReturn+row.thisMonthTuiHui;
							}

							if (value > 0) {
								return value
							} else {
								return 0
							}
						}
					}/* , {
						field: 'num8',
						title: '良品',
						align:'center',
						//width: 150,
						templet: function (row){
							var value = "";
							if(null != row.geLiBalance){
								value = row.thisMonthAdd - row.thisMonthReduce + row.yestdayNum - row.thisMonthReturn - row.geLiBalance + row.thisMonthTuiHui;
							}
							return value;
						}
					}, {
						field: 'createDate',
						title: '时间',
						width: 150,
						align:'center'
					} */
				]]
				,done : function(res, curr, count){
	                $('th').css({
	                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
	                });
	                $('td').css({
                    	'font-size':'20px',
                    });
				}
			});
			
			/* 入库记录 */
			table.render({
				elem: '#putStockTable'
				,where:{
					'maName':'',
					'date':s2,
					'customer_id':'',
					'selectTime':'',
					'selectType':6,
					'selectTime2':s2
				},
				url:'${pageContext.request.contextPath }/reportForm/getReportFormJinList.do'
				//,url:'${pageContext.request.contextPath }/json/list2.json'
				,title: 'machineList'
				,page: false
				,limits:[10,20,30]
				//,defaultToolbar:['filter', 'print']
				,request: {   //如果无需自定义请求参数，可不加该参数
					pageName: 'page' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,response: {   //如果无需自定义数据响应名称，可不加该参数
					countName: 'total' //规定数据总数的字段名称，默认：count
					,dataName: 'rows' //规定数据列表的字段名称，默认：data
				}
				,cols:	[
					[
						{field:'', title:'<div>当日入库&nbsp;&nbsp;&nbsp;<div style="float: right"><span id="myTime2"></span></div></div>',colspan: 8, align:'center'}

					],
					[
						/*{type:'numbers',title: '序号', width:80, sort: true, fixed: 'left'}*/
						{field:'id', type:'numbers',title: '序号', align:'center'},
						{field: 'sendPhone', title: '供应商',align:'center'}
						,{field: 'sendCompany', title: '品名', width: 200,align:'center'}
						,{field: 'sendName', title: 'SAP/QAD',align:'center'}
						,{field: 'sendDate', title: '数量', width: 80,align:'center'}
						,{field: 'createDate', title: '时间',align:'center'}
						,{field: 'receiveNumber', title: '单号',align:'center'}
						,{field: 'receive_company', title: '类型',align:'center',
							templet:function (row) {
								if (row.receive_company == 1 && row.type == 0) {
									return '精简入库,正常入库';
								}else if (row.receive_company == 2  && row.type == 0) {
									return '批量入库,正常入库'
								}else if (row.receive_company == 0  && row.type == 0) {
									return '一般入库,正常入库';
								}else if (row.receive_company == 1 && row.type == 1) {
									return '精简入库,发货退回';
								}else if (row.receive_company == 2  && row.type == 1) {
									return '批量入库,发货退回'
								}else if (row.receive_company == 0  && row.type == 1) {
									return '一般入库,发货退回';
								}
							}
						}
					]
				]
				,done : function(res, curr, count){
					$('th').css({
						'background-color': '#009688', 'color': '#fff','font-weight':'bold',
						//'font-size': 10,
					});
					$('td').css({
                    	'font-size':'20px',
                    });
				}
			});
			
			/* 出库记录 */
			table.render({
				elem: '#outStockTable'
				,where:{
					'maName':'',
					'date': s2,
					'customer_id':'',
					'selectTime':'',
					'selectType': 4,
					'selectTime2': s2
				}
				,url:'${pageContext.request.contextPath }/reportForm/getReportFormChungList.do'
				//,url:'${pageContext.request.contextPath }/json/list3.json'
				,title: 'machineList'
				,page: false
				,limits:[10,20,30]
				//,defaultToolbar:['filter', 'print']
				,request: {   //如果无需自定义请求参数，可不加该参数
					pageName: 'page' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,response: {   //如果无需自定义数据响应名称，可不加该参数
					countName: 'total' //规定数据总数的字段名称，默认：count
					,dataName: 'rows' //规定数据列表的字段名称，默认：data
				}
				,cols:	[
					[
						/*{field:'', title:'当日出库',colspan: 9, align:'center'},*/
                        {field:'', title:'<div>当日出库&nbsp;&nbsp;&nbsp;<div style="float: right"><span id="myTime3"></span></div></div>',colspan: 8, align:'center'}

                    ],
					[
						{field:'id', type:'numbers',title: '序号', align:'center'}
						,{field: 'contacts_tel', title: '供应商', align:'center'}
						,{field: 'warehouse_name', title: '品名', width:200, align:'center'}
						,{field: 'warehouse_address', title: 'SAP/QAD', align:'center'}
						,{field: 'userName', title: '数量', width:80, align:'center'}
						,{field: 'create_date', title: '时间', align:'center'}
						,{field: 'out_stock_num', title: '单号', align:'center'}
						,{field: 'img_url', title: '类型', align:'center', width:150,
						//0:精简出库，1：扫码出库、2：紧急出库
						templet:function  (row) {
							//console.log(row.img_url)
							if (row.img_url == 0) {
								return '精简出库';
							}else if(row.img_url == 2){
								return '紧急出库';
							}else if(row.img_url == 1){
								return '一般出库';
							}else if (row.img_url == 3) {
								return '批量出库'
							}

						}
					}
				]]
				,done : function(res, curr, count){
					$('th').css({
						'background-color': '#009688', 'color': '#fff','font-weight':'bold',
						//'font-size': 10,
					});
					$('td').css({
                    	'font-size':'20px',
                    });
				}
			});
			
			//物料紧急需求计划
			table.render({
       		    elem: '#urgentDeliveryTable'
       		    ,url:'${pageContext.request.contextPath }/needs/queryAll.do'
       		    ,title: '物料紧急需求计划'
       		    ,id :'contentDetialTable'
       		    ,limits:[10,20,30]
       		    ,cols: [[
       		    	{field:'id', title:'序号', type:'numbers', width: 60},
       		    	{field:'customer_name', title:'供应商名称', align:'center', width: 150},
       		    	{field:'materiel_name', title:'物料名称', align:'center', width: 150},
       		    	{field:'materiel_num', title:'物料编码', align:'center', width: 130},
                   /*  {field:'planQuantity', title:'生产计划数量', align:'center'}, */
                    {field:'xstock', title:'线边库存数量', align:'center', width: 150},
                    {field:'astock', title:'安全库存数量', align:'center', width: 150},
                   /*  {field:'shipmentsQuantity', title:'需求发货数量', align:'center'}, */
                    {field:'t67', title:'06~07', align:'center', width: 100},
                    {field:'stock67', title:'小时库存', align:'center', width: 100},
                    {field:'need67', title:'小时需求量', align:'center', width: 100},
                    {field:'t89', title:'08~09', align:'center', width: 100},
                    {field:'stock89', title:'小时库存', align:'center', width: 100},
                    {field:'need89', title:'小时需求量', align:'center', width: 100},
                    {field:'after89', title:'小时到货后库存', align:'center', width: 100},
                    {field:'t1011', title:'10~11', align:'center', width: 100},
                    {field:'stock1011', title:'小时库存', align:'center', width: 100},
                    {field:'need1011', title:'小时需求量', align:'center', width: 100},
                    {field:'after1011', title:'到货后库存', align:'center', width: 100},
                    {field:'t213', title:'12~13', align:'center', width: 100},
                    {field:'stock1213', title:'小时库存', align:'center', width: 100},
                    {field:'need1213', title:'小时需求量', align:'center', width: 100},
                    {field:'after1213', title:'到货后库存', align:'center', width: 100},
                    {field:'t1415', title:'14~15', align:'center', width: 100},
                    {field:'need1415', title:'小时需求量', align:'center', width: 100},
                    {field:'t1617', title:'16~17', align:'center', width: 100},
                    {field:'need1617', title:'小时需求量', align:'center', width: 100},
                    {field:'t1819', title:'18~19', align:'center', width: 100},
                    {field:'need1819', title:'小时需求量', align:'center', width: 100},
                    {field:'t2021', title:'20~21', align:'center', width: 100},
                    {field:'t2223', title:'22~23', align:'center', width: 100},
                    {field:'t01', title:'00~01', align:'center', width: 100},
                    {field:'t23', title:'02~03', align:'center', width: 100},
                    {field:'t45', title:'04~05', align:'center', width: 100},
       		    ]]
       		    ,page: false
	       		 ,done : function(){
	       			$('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold','font-size':'20px',
                    });
	       			$('td').css({
                    	'font-size':'20px',
                    });
	       			 
                }
       		});
			
			//拆箱计划
			table.render({
                elem: '#splitCaeTable'
				//,url:'${pageContext.request.contextPath }/unpackDetal/queryAll.do'
				,url:'${pageContext.request.contextPath }/jyyUnpacking/kanBanPlanUnpacking.do'
				,where:{
					'ordernum':'',
					'page':1,
					'limit':10,
				}
                ,title: '拆箱计划'
                ,id :'contenttableDetails'
                ,limits:[10,20,30]
                ,cols: [
                	[
						/*{field:'', title:'拆箱计划',colspan: 8, align:'center'},*/
                        {field:'', title:'<div>拆箱计划&nbsp;&nbsp;&nbsp;<div style="float: right"><span id="myTime4"></span></div></div>',colspan: 8, align:'center'}

                    ],
					[
						{field:'id', title:'序号', type:'numbers', align:'center'},
						{field:'mid', title:'物料id', align:'center', hide:true},
						{field:'type', title:'供应商', align:'center'},
						{field:'materiel_name', title:'品名', align:'center'},
						{field:'materiel_num', title:'SAP/QAD', align:'center'},
						/* {field:'brevity_num', title:'零件号', align:'center', width: 300,}, */
						/* {field:'pici', title:'批次', width: 200, align:'center'}, */
						{field:'znum', title:'拆箱数（个）', width: 150, align:'center'},
						{field:'specs', title:'拆箱规格(个)', width: 150, align:'center'},
						{field: 'remark',title: '紧急程度', width: 130,align:'center'
							,templet: function(d){
								var value = d.worklog;
								if(value == 0){
									value = "一般"
								}else if(value == 1){
									value = "中等"
								}else if(value == 2){
									value = "紧急"
								}
								return value;
							}
						},
					]]
                ,page: false
                ,done : function(res){
                	$('td').css({
                    	'font-size':'20px',
                    });
                	$('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold','font-size':'20px',
                    });
                	/* 设置隔行变色的颜色 */
	               	/* var that = this.elem.next();
	  		        	res.data.forEach(function (item, index) {
	  		        	//console.log(item.empName);item表示每列显示的数据
	  		            if (index%2==0) {
	  		                 var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#ee9300");
	  		            } else{
	  		            	var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#33ff33");
	  		            } 
	  		        });  */
                }
            });
			
			
			//轮播实例
			carousel.render({
				elem: '#test1'
			    ,width: '90%' //设置容器宽度(百分比，像素都可以)
			    ,height: '300px'
			    ,arrow: 'always' //  始终显示:always,  不显示:none,  悬停显示:hover
			    ,anim: 'fade' //切换动画方式  渐隐渐现:fade, 上下切换:updown,  左右切换:default
			    ,interval:'30000' //自动切换时间，默认3000，不能小于800，单位 毫秒ms
			    ,full:'false' //是否全屏轮播
			});
		});


	</script>

    <script type="text/javascript">
        function showTime(){
            nowtime=new Date();
            year=nowtime.getFullYear();
            month=nowtime.getMonth()+1;
            date=nowtime.getDate();
            document.getElementById("mytime").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
            document.getElementById("myTime2").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
            document.getElementById("myTime4").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
            document.getElementById("myTime3").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
        }
        setInterval("showTime()");
    </script>

</body>
</html>